<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div {
            width: 356px;
            height: 518px;
            float: left;
        }
        div i {
            width: 1px;
            height: 1px;
            display: block;
            float: left;
            background-image: url("image/gxt2.png");
        }
    </style>
</head>
<body>
<div>
    <img src="image/gxt2.png">
</div>
<div id="box">
    <i style="background-position: -1px -1px;"></i>
    <i></i>
    <i></i>
</div>
<script>
    var s = '';
    var i = 0;
    while (i<518){

        var j = 0;
        while (j<356){
            s += '<i style="background-position: -'+j+'px -'+i+'px;"></i>';
            j++;
        }
        i++;
    }
    var boxObj = document.getElementById('box');
    boxObj.innerHTML = s;
</script>
<div></div>
</body>
</html>